<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">

        <!-- 表头表单 (关键字...) -->
        <el-form :inline="true" :model="query">
          <el-form-item label="关键字">
            <el-input v-model="query.keyword" placeholder="根据文章标题搜索" />
          </el-form-item>
          <el-form-item :data="tableData" label="状态">
            <el-select v-model="query.state" placeholder="请选择">
              <el-option label="已启用" value="1" />
              <el-option label="已禁用" value="0" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button @click="offSubmit">清除</el-button>
            <el-button type="primary" @click="onSubmit">搜索</el-button>
          </el-form-item>
          <el-button
            type="success"
            style="float:right"
            icon="el-icon-edit"
            @click="editRoles"
          >新增技巧</el-button>
        </el-form>

        <!-- 提示 -->
        <el-alert
          title=""
          type="info"
          show-icon
          :closable="false"
        >
          {{ `数据一共 ${counts} 条` }}
        </el-alert>

        <!-- 表格数据 -->
        <template>
          <el-table
            :data="tableData"
            stripe
            style="width: 100%"
          >
            <el-table-column
              type="index"
              label="序号"
              width="150"
            />
            <el-table-column
              prop="title"
              label="文章标题"
              width="280"
            >
              <template slot-scope="scope">
                {{ scope.row.title }}
                <i v-if="scope.row.videoURL" class="el-icon-film" @click="video(scope.row.videoURL)" />
              </template>

            </el-table-column>
            <el-table-column
              prop="visits"
              label="阅读数"
              width="250"
            />
            <el-table-column
              prop="username"
              label="录入人"
              width="250"
            />
            <el-table-column
              prop="createTime"
              label="录入时间"
              width="350"
            >
              <template slot-scope="scope">
                {{ scope.row.createTime | parseTimeByString }}
              </template>
            </el-table-column>
            <el-table-column
              :formatter="formatter"
              prop="state"
              label="状态"
              width="150"
            />
            <el-table-column
              fixed="right"
              label="操作"
              width="200"
            >

              <template slot-scope="scope">
                <el-button type="text" size="small" @click="handleClick(scope.row)">预览</el-button>
                <el-button type="text" size="small" @click="Switchover(scope.row.id,scope.row.state)">{{ scope.row.state === 1 ? '禁用':'启用' }}</el-button>
                <el-button type="text" size="small" :disabled="scope.row.state === 1" @click="revise(scope.row.id)">修改</el-button>
                <el-button type="text" size="small" :disabled="scope.row.state === 1" @click="del(scope.row)">删除</el-button>
              </template>

            </el-table-column>
          </el-table>

        </template>

        <!-- 页码 -->
        <el-pagination
          background
          :total="counts"
          :current-page="query.page"
          :page-size="query.pagesize"
          :page-sizes="[10, 15, 20, 25]"
          layout=" prev, pager, next,sizes, jumper"
          class="y-right"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />

        <!-- 新增/修改弹框 -->
        <el-dialog
          :title="isEdit ? '修改文章' : '新增文章'"
          width="50%"
          :visible.sync="dialogShow"
        >
          <Rich
            v-if="dialogShow"
            :is-edit="isEdit"
            :uid="Uid"
            @close="addClose"
            @writeOff="writeOff"
          />
        </el-dialog>

        <!-- 视频弹框组件 -->
        <el-dialog
          class="dialog-px"
          :visible.sync="dialogVisible"
        >
          <div class="videos ">
            <div class="round-button" @click="Fn">
              <span class="el-icon-close" />
            </div>
            <video
              :src="videoUrl"
            />
          </div>
        </el-dialog>

        <!-- 预览组件 -->
        <el-dialog
          :visible.sync="Preview"
          title="预览文章"
        >
          <LookAt
            :obj="obj"
          />
        </el-dialog>

      </el-card>
    </div>
  </div>
</template>

<script>

import { list, remove, changeState } from '@/api/hmmm/articles' // 导入列表API
import EmployeeEnum from './constant/articles' // 导入枚举方法

import Rich from './companys/Rich text Popup.vue'
import LookAt from './companys/look at.vue'

export default {
  name: 'Articles',

  components: {
    Rich,
    LookAt
  },

  data() {
    return {
      obj: {},
      Preview: false, // 预览
      dialogVisible: false, // 视频弹框
      counts: 0,
      isEdit: false,

      dialogShow: false, // 弹框状态

      disabled: '禁用',

      // 文章列表
      tableData: [],

      //   页码
      query: {
        page: 1, // 当前页码
        pagesize: 10, // 每页显示的条数
        keyword: null, // 关键字参数
        state: null // 状态 1 开启 0 屏蔽
      },

      Uid: '',

      videoUrl: ''
    }
  },

  created() {
    this.list()
  },

  methods: {
    // 点击按钮关闭
    Fn() {
      this.dialogVisible = false
    },

    // 预览
    handleClick(obj) {
      this.Preview = true
      this.obj = obj
    },

    // 视频方法
    video(url) {
      this.dialogVisible = true
      this.videoUrl = url
    },

    // 删除
    del(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await remove(id)
        this.$message.success('删除成功')
        this.list()
      })

      //   await remove(id)
      //   this.$message.success('删除成功')
      //   this.list()
    },

    // 修改
    revise(id) {
      this.Uid = id
      this.isEdit = true
      this.dialogShow = true
    },

    // 取消
    writeOff() {
      this.dialogShow = false
    },

    // 子组件确定按钮
    addClose() {
      this.list()
      this.dialogShow = false
    },

    // 新增技巧
    editRoles() {
      this.isEdit = false
      this.dialogShow = true
    },

    // 禁用||启用
    async Switchover(id, state) {
      const newState = state === 0 ? 1 : 0
      await changeState({ id, state: newState })
      //   console.log(res)
      this.list()
    },

    // 调用列表状态
    formatter(row, colume, cellValue, index) {
      const obj = EmployeeEnum.hireType.find(item => item.id === Number(cellValue))
      return obj ? obj.value : '无'
    },

    // 获取列表API
    async list() {
      const res = await list({ ...this.query })
      //   console.log(res)
      this.tableData = res.data.items
      this.counts = res.data.counts

    //   console.log(tableData)
    },

    // 查询按钮
    onSubmit() {
      this.list()
    },

    // 清除按钮
    offSubmit() {
      this.query = {}
    },

    // 当每页条数改变时触发
    handleSizeChange(val) {
    //   console.log(`每页 ${val} 条`)
      this.query.pagesize = val
      this.query.page = 1
      this.list()
    },

    // 当前页(页码)变动时候触发的事件
    handleCurrentChange(val) {
    //   console.log(`当前页: ${val}`)
      this.query.page = val
      this.list()
    }

  }
}
</script>

<style scoped  >
>>> .el-alert__icon.is-big{
    font-size: 16px;
}

>>> .el-dialog {
    width: 800px
}

.y-right {
    margin: 20px 0 20px 20px;
    float:right
}

 /deep/ .ql-editor {
  min-height: 200px;
}

.el-icon-film {
    color: #0000ff;
}

>>> .videos {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0);
    overflow: hidden;
    width: 90.333333rem;
    height: 49.166667rem;
    margin-top: 87px;
    margin-left: 226px;

}

>>> .dialog-px{
    margin: -9999px;
}

.round-button {
    width: 50px;
    height: 50px;
    position: absolute;
    top: 30px;
    left: 50%;
    -webkit-transform: translate(-50%);
    transform: translate(-50%);
    background: rgba(0,0,0,.4);
    -webkit-box-shadow: 0 0 5px rgb(0 0 0 / 40%);
    box-shadow: 0 0 5px rgb(0 0 0 / 40%);
    border-radius: 50%;
    text-align: center;
    line-height: 50px;
    color: #fff;
    font-size: 20px;
}
</style>
